<script setup lang="ts">
import { ref,watch } from 'vue'

const searchVal=ref('')
const clear=() =>{
  searchVal.value=''
}
const comfirmSearch=() =>{
  emit('search',searchVal.value)
}
const emit=defineEmits<{
  (e: 'search', val: any): void,
}>()
</script>

<template>
  <div
    w:flex="~ nowrap"
    w:align="items-center"
    w:justify="center"
    w:h="16"
    w:bg="gray-100"
    w:border="rounded-full"
    w:p="x-8"
  >
    <div class="iconfont icon-search" @click="comfirmSearch"></div>
    <input v-model.trim="searchVal"
      w:outline="none"
      w:flex="1"
      w:m="4"
      w:h="full"
      w:bg="transparent"
    />
    <div class="iconfont icon-search_close" @click="clear"></div>
  </div>
</template>

<style scoped lang="scss">

</style>